<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
    <!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->
<body>
    <div id="root">
        <student/>
        <student/>
        <student/>
    </div>
    <script>
        Vue.config.productionTip = false
        const student = ({
            name:"styy",        //使用name改变组件在开发者模式中呈现的名字
            template: `<div>
                <h2>学生姓名:{{studentName}}</h2>
                <h2>学校地址:{{address}}</h2>
                </div>`,
            data() {
                return {
                    studentName: "申屠宇扬",
                    address: "长春光华学院"
                }
            }
        })
        var v = new Vue({
            el: '#root',
            data: {},
            components: {
                // 命名规则,多个单词
                // "my-school":school
                // 缺少脚手架
                // MySchool: student
                // 不能使用元素作为原件名
                // h2:student
                student
            }
        })
    </script>
</body>

</html>